<template>
  <div class="container">
    <div class="header">
      <!-- 用户信息部分 -->
      <div class="user-wrapper">
        <img :src="userMsgList.photo" class="avatar">
        <div class="nickname">{{ userMsgList.name }}</div>
        <div class="info-wrapper" @click="go">
          <span class="info">个人信息</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 动态信息部分 -->
      <div class="user-data-wrapper">
        <div class="item">
          <div class="count">5029</div>
          <div>动态</div>
        </div>
        <div class="item">
          <div class="count">{{ userMsgList.follow_count }}</div>
          <div>关注</div>
        </div>
        <div class="item">
          <div class="count">{{ userMsgList.fans_count }}</div>
          <div>粉丝</div>
        </div>
        <div class="item">
          <div class="count">{{ userMsgList.like_count }}</div>
          <div>被赞</div>
        </div>
      </div>
    </div>
     <!-- 消息部分 -->
    <div class="function-zone">
      <div class="item">
        <van-icon name="chat-o" class="icon" />
        <div>消息通知</div>
      </div>
      <div class="item">
        <van-icon name="like-o" class="icon" />
        <div>我的收藏</div>
      </div>
      <div class="item">
        <van-icon name="clock-o" class="icon" />
        <div>阅读历史</div>
      </div>
      <div class="item">
        <van-icon name="bulb-o" class="icon" />
        <div>我的作品</div>
      </div>
    </div>
    <!-- 更多服务部分 -->
    <div class="more">
      <div class="title">更多服务</div>
      <div class="item-wrapper">
        <div class="item">
          <van-icon name="question-o" class="icon"/>
          <div>用户反馈</div>
        </div>
        <div class="item">
          <van-icon name="audio" class="icon" />
          <div>小智同学</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
   computed: {
    // 模块名，字段数组
    ...mapState('my', ['userMsg']),
    // 用户自己的信息
    userMsgList() {
      return this.userMsg;
    }, 
  },

  methods: {
    ...mapActions('my', ['updateUserMsgList']),
    // 跳转用户信息页面
   go() {
      this.$router.push('/user-info')
    }
  },

  created() {
    // 用户自己的信息
    this.updateUserMsgList();   
  },

}

</script>

<style lang="less"scoped>
.container {
  background-color: #f8f8f8;
  .header {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom right, #4a4776, #a7a9d0);
    width: 100%;
    height: 280px;
    padding: 0 12px;
    box-sizing: border-box;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    // 用户信息
    .user-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 60px;
      .avatar {
        display: block;
        object-fit: cover;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
      }
      .nickname {
        flex: 1;
        color: #fff;
        font-size: 18px;
      }
      .info-wrapper {
        color: #fff;
      }
    }
    // 动态信息部分
    .user-data-wrapper {
      display: flex;
      color: #fff;
      justify-content: space-around;
      align-items: center;
      margin-top: 40px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  // 功能区域
  .function-zone {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 8px;
    margin-top: -80px;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-bottom: 8px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 28px 0;
      color: #3a3a3a;
      .icon {
        margin: 16px 0;
        font-size: 20px;
      }
    }
  }
  // 更多服务部分
  .more {
    background-color: #fff;
    width: calc(100% - 40px);
    margin-left: 20px;
    padding: 8px 0;
    box-sizing: border-box;
    border-radius: 8px;
    .title {
      font-size: 20px;
      color: #404040;
      margin: 0 0 20px 12px;
    }
    .item-wrapper {
      display: flex;
      align-items: center;
      margin: 8px 0 8px 12px;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        .icon {
          margin: 4px 0;
          font-size: 20px;
        }
      }
    }
  }
}

</style>